*{
margin:0;
padding:0;
box-sizing:border-box;
background-color:linear-gradient(to bottom right, #b5ead7, #85f4ff, #e0bbe4);
}
.a{
height:140vh;
width:100%;
background:linear-gradient(to bottom right, #b5ead7, #85f4ff, #e0bbe4); 
font-family:cursive;
position:relative;
}

nav{
width:84%;
margin:auto;
padding:20px 0;
display:flex;
align-items:center;
justify-content:space-between;
}
.b{
width:100px;
cursor:pointer;
}
nav ul li{
display:inline-block;
list-style:none;
margin:10px 20px;
}
nav ul li a{
text-decoration:none;
color:black;
}
nav ul li a:hover{
color:blue;
}
.c{
margin-left:8%;
margin-top:15%;
}
.c h1{
font-size:40px;
color:#212121;
margin-bottom:10px;
}
.c p{
color:#212121;
line-height:22px;
}
.c a{
background:#212121;
padding:0;
text-decoration:none;
color:white;
display:inline-block;
margin:30px 0;
border-radius:25px;
font-family:cursive;
}
.d{
width:45%;
height:80%;
position:absolute;
bottom :0;
right:100px;
}

.d img{
height: 90%;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 80%;
  transform: none;
  transition: none;
}


.g{
margin-left:8%;
margin-top:20px;
}
.g a{
font-size:35px;
color:black;
margin-right:20px;
}
.c h1 span{
color:green;
font-family:cursive; 
}
.c h1{
font-family:cursive; 
}
.c h2{
font-family:cursive;
margin-bottom:10px;
color:#212121;
}
.c h3{
font-family:cursive;
margin-bottom:5px;
}
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .d {
    position: static;
    width: 100%;
    text-align: center;
    margin-top: 30px;
  }

  .d img {
    position: static;
    width: 80%;
    margin-bottom: 10px;

  }

  .c {
    margin-top: 10%;
  }
}

@media (max-width: 480px) {
  .c h1 {
    font-size: 28px;
  }

  .c h2, .c h3 {
    font-size: 18px;
  }

  nav ul {
    flex-direction: column;
    align-items: flex-start;
  }

  .g a {
    font-size: 24px;
  }
}